<template>
	<div class="stamp">
		<div class="imgbtn" :class="{active:isshow}" @click="getNot"><i class="fa"    :class="fa"></i>{{writing}}</div>
	</div>
</template>
<script>
	export default{
		name:'stamp',
		data(){
			return{
				isshow:false,
				writing:''
			}
		},
		props:['lebal','fa'],
		mounted() {
			this.writing = this.lebal
		},
		methods:{
			getNot:function(){
				
				this.isshow=!this.isshow
				if(this.writing=="加入收藏"){
					this.writing="取消收藏"
			  	}else if(this.writing=="取消收藏"){
			  		this.writing="加入收藏"
			  	}else if(this.writing=="标记为已阅"){
			  		this.writing="取消已阅"
			  	}else if(this.writing=="取消已阅"){
			  		this.writing="标记为已阅"
			  	}
			}
		}
	}
</script>
<style scoped>
	.imgbtn{
		display: inline-block;
		width: 100px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #dcdcdc;
		border-radius: 50px;
		text-align: center;
		cursor: pointer;
		box-sizing:border-box;
	}
	.imgbtn .fa{
		margin-right: 4px;
	}
	.imgbtn.active{
		border: 1px solid #fff;
		color: #8c97cb;
	}
</style>